<template>
  <div>
    <div style="margin-bottom: 20px">
      <el-button @click="getMockPersonData()">换一批</el-button>
    </div>
    <template>
      <el-table :data="tableData" style="width: 100%" :row-class-name="tableRowClassName">
        >
        <el-table-column prop="Name" label="姓名" width="90"></el-table-column>
        <el-table-column prop="Mobile" label="手机号码" width="120"></el-table-column>
        <el-table-column prop="Idcard" label="证件号码"></el-table-column>
      </el-table>
    </template>
  </div>
</template>
 <script>
import support from "@/api/support";
export default {
  mounted() {
    this.getMockPersonData();
   
  },
  data() {
    return {
      tableData: []
    };
  },
  methods: {
    getMockPersonData() {
      var _this = this;
      console.log(this.$route.query);
      support.getMockPersonData(this.$route.query).then(r => {
        _this.tableData = r.data.data;
      });
    },
    tableRowClassName({ row }) {
      let genderCode = row.Idcard.charAt(16);
      if (parseInt(genderCode) % 2 == 0) {
        return "warning-row";
      } else {
        return "success-row";
      }
    }
  }
};
</script>
<style>
.el-table .warning-row {
  background: #ffd9e6;
}

.el-table .success-row {
  background: #f0f9eb;
}
</style>